<template>
    <!-- 页头 -->
    <el-page-header :icon="null" @back="backout">
    <template #content>
      <div class="flex items-center">

        <span class="text-sm mr-2" style="color: var(--el-text-color-regular)">
          审核管理
        </span>
        <el-tag>admin</el-tag>
      </div>
    </template>
    <template #extra>
      <div class="flex items-center">
        <el-space :size="size" :spacer="spacer">
          <el-popover
      :width="300"
      popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
    >
      <template #reference>
        <el-avatar :size="50" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
      </template>
      <template #default>
        <div
          class="demo-rich-conent"
          style="display: flex; gap: 16px; flex-direction: column"
        >
          <el-avatar
            :size="60"
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            style="margin-bottom: 8px"
          />
          <div>
            <p
              class="demo-rich-content__name"
              style="margin: 0; font-weight: 500"
            >
              Admin
            </p>
            <p
              class="demo-rich-content__mention"
              style="margin: 0; font-size: 14px; color: var(--el-color-info)"
            >
              @beathub.com
            </p>
          </div>

          <p class="demo-rich-content__desc" style="margin: 0">
            生产队的驴正在加紧赶工......
          </p>
        </div>
      </template>
    </el-popover>
      </el-space>
        <el-button type="danger" plain class="ml-2" @click="logout">退出</el-button>
      </div>
    </template>
  </el-page-header>
  <el-divider content-position="right">审核员操作</el-divider>

   <!-- 首行数据统计卡片 -->
   <el-card width="100%">
    <el-row>
      <el-col :span="6">
        <el-statistic :value="passcount.statecount1">
          <template #title>
            <div style="display: inline-flex; align-items: center">
              已通过
              <el-icon style="margin-left: 4px" :size="12">
                <Male />
              </el-icon>
            </div>
          </template>
          <template #suffix>/{{checkcount.statecount4}}</template>
        </el-statistic>
      </el-col>

      <el-col :span="6">
        <el-statistic :value="nopasscount.statecount2">
          <template #title>
            <div style="display: inline-flex; align-items: center">
              未通过
              <el-icon style="margin-left: 4px" :size="12">
                <Male />
              </el-icon>
            </div>
          </template>
          <template #suffix>/{{checkcount.statecount4}}</template>
        </el-statistic>
      </el-col>
      <el-col :span="6">
        <el-statistic title="已审核" :value="checkcount.statecount4" />
      </el-col>
      <el-col :span="6">
        <el-statistic title="待审核" :value="nocheckcount.statecount3">
          <template #suffix>
            <el-icon style="vertical-align: -0.125em">
              <ChatLineRound />
            </el-icon>
          </template>
        </el-statistic>
      </el-col>
    </el-row>
  </el-card>
  <br>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <!-- 视频审核 -->
    <el-tab-pane label="视频审核" name="first">
        <el-table :data="filterTableData" style="width: 100%" :model="formv">
          <el-table-column
      prop="create_date"
      label="投稿日期"
      sortable
      width="180"
      column-key="date"
    />
    <el-table-column label="创作者" prop="uname" />
    <el-table-column label="视频名称" prop="workname" />   
    <el-table-column align="right">
      <template #header>
        <div class="search-bar">
    <el-input v-model="formv.workname" size="small" placeholder="作品名称搜索" class="flex-item" clearable/>
    <el-button type="primary" @click="btnQueryv" class="flex-item"><i class="iconfont icon-chaxun"></i></el-button>
  </div>
      </template>
      <template #default="scope">
      <el-button size="big" type="primary" @click="table (scope.row.workid)">审核</el-button
  >
</template>
    </el-table-column>
  </el-table>
  <!-- 分页功能 -->
  <div class="table-page">
    <el-pagination
      @size-change="handleSizeChangev"
      @current-change="handleCurrentChangev"
      :current-page="currentPage"
      :page-sizes="[5,10,20]"
      :page-size="pageSize"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="sizes, prev, pager, next, jumper"
      :total="pageInfov.total"
    />
  </div>
    </el-tab-pane>
<!-- 弹出审核侧边栏 -->
    <el-drawer
    v-model="tableVisible"
    title="审核详情"
    direction="rtl"
    size="50%"
  >
  <el-descriptions :column="1" border>
    <el-descriptions-item label="视频名称">{{ gridDatav.workname }}</el-descriptions-item>
    <el-descriptions-item label="内容">
      <video controls width="640" height="360" :src="gridDatav.work">
</video>
</el-descriptions-item>
  </el-descriptions>
    <p/>
     <div  style="display: flex; justify-content: center;">
      <el-form :model="gridDatav">
        <el-form-item label="反馈 ：">
  <el-input
    v-model="gridDatav.feedback"
    :autosize="{ minRows: 2, maxRows: 4 }"
    type="textarea"
    placeholder="Please input"
  />
</el-form-item>
<div style="margin: 30px 200px">

    <el-radio-group v-model="gridDatav.state">
      <el-radio  label="审核通过" size="large" border style="background-color:honeydew;">通过</el-radio>
      <el-radio  label="审核不通过" size="large" border style="background-color:silver;">不通过</el-radio>
      <el-button type="primary" plain @click="updatev">提交</el-button>
    </el-radio-group>
    </div>
  </el-form>
  </div>

  </el-drawer>
<!-- 乐谱审核 -->
    <el-tab-pane label="乐谱审核" name="second">
      <el-table :data="filterTableData2" style="width: 100%" model="forms">
          <el-table-column
      prop="create_date"
      label="投稿日期"
      sortable
      width="180"
      column-key="date"
    />
    <el-table-column label="上传者" prop="uname" />
    <el-table-column label="乐谱名称" prop="workname" />   
    <el-table-column align="right">
      <template #header>
        <div class="search-bar">
    <el-input v-model="forms.workname" size="small" placeholder="作品名称搜索" class="flex-item" />
    <el-button type="primary" @click="btnQuerys" class="flex-item"><i class="iconfont icon-chaxun"></i></el-button>
  </div>
      </template>
      <template #default="scope">
      <el-button size="big" type="primary" @click="score (scope.row.workid)">审核</el-button
  >
</template>
    </el-table-column>
  </el-table>
  <!-- 分页功能 -->
  <div class="table-page">
    <el-pagination
      @size-change="handleSizeChanges"
      @current-change="handleCurrentChanges"
      :current-page="currentPage"
      :page-sizes="[5,10,20]"
      :page-size="pageSize"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="sizes, prev, pager, next, jumper"
      :total="pageInfos.total"
    />
  </div>
    </el-tab-pane>
    <el-drawer
    v-model="scoreVisible"
    title="审核详情"
    direction="rtl"
    size="50%"
  >
  <el-descriptions :column="1" border>
    <el-descriptions-item label="乐谱名称">{{ gridDatas.workname }}</el-descriptions-item>
    <el-descriptions-item label="内容"><img :src="gridDatas.work" alt="暂无图片" width="520" height="650"></el-descriptions-item>
  </el-descriptions>
    <p/>
    <div  style="display: flex; justify-content: center;">
      <el-form :model="gridDatas">
        <el-form-item label="反馈 ：">
  <el-input
    v-model="gridDatas.feedback"
    :autosize="{ minRows: 2, maxRows: 4 }"
    type="textarea"
    placeholder="Please input"
  />
</el-form-item>
<div style="margin: 30px 200px">

    <el-radio-group v-model="gridDatas.state">
      <el-radio  label="审核通过" size="large" border style="background-color:honeydew;">通过</el-radio>
      <el-radio  label="审核不通过" size="large" border style="background-color:silver;">不通过</el-radio>
      <el-button type="primary" plain @click="updates">提交</el-button>
    </el-radio-group>
    </div>
  </el-form>
  </div>

  </el-drawer>
    
    <!-- 乐曲审核 -->
    <el-tab-pane label="乐曲审核" name="third">
      <el-table :data="filterTableData3" style="width: 100%" model="formm">
          <el-table-column
      prop="create_date"
      label="投稿日期"
      sortable
      width="180"
      column-key="date"
    />
    <el-table-column label="上传者" prop="uname" />
    <el-table-column label="乐曲名称" prop="workname" />   
    <el-table-column align="right">
      <template #header>
        <div class="search-bar">
    <el-input v-model="formm.workname" size="small" placeholder="作品名称搜索" class="flex-item" />
    <el-button type="primary" @click="btnQuerym" class="flex-item"><i class="iconfont icon-chaxun"></i></el-button>
  </div>
      </template>
      <template #default="scope">
      <el-button size="big" type="primary" @click="music (scope.row.workid)">审核</el-button
  >
</template>
    </el-table-column>
  </el-table>
  <!-- 分页功能 -->
  <div class="table-page">
    <el-pagination
      @size-change="handleSizeChangem"
      @current-change="handleCurrentChangem"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20]"
      :page-size="pageSize"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="sizes, prev, pager, next, jumper"
      :total="pageInfom.total"
    />
  </div>
    </el-tab-pane>
    <el-drawer
    v-model="musicVisible"
    title="审核详情"
    direction="rtl"
    size="50%"
  >
  <el-descriptions :column="1" border>
    <el-descriptions-item label="乐曲名称">{{ gridDatam.workname }}</el-descriptions-item>
    <el-descriptions-item label="内容"> 
      <audio controls :src="gridDatam.work">
      </audio>
    </el-descriptions-item>
  </el-descriptions>
    <p/>
    <div style="display: flex; justify-content: center;">
      <el-form :model="gridDatam">
        <el-form-item label="反馈 ：">
  <el-input
    v-model="gridDatam.feedback"
    :autosize="{ minRows: 2, maxRows: 4 }"
    type="textarea"
    placeholder="Please input"
  />
</el-form-item>
<div style="margin: 30px 200px">

    <el-radio-group v-model="gridDatam.state">
      <el-radio  label="审核通过" size="large" border style="background-color:honeydew;">通过</el-radio>
      <el-radio  label="审核不通过" size="large" border style="background-color:silver;">不通过</el-radio>
      <el-button type="primary" plain @click="updatem">提交</el-button>

    </el-radio-group>
    </div>
  </el-form>
  </div>

  </el-drawer>

    <!-- 专栏审核 -->
    <el-tab-pane label="专栏审核" name="fourth">
      <el-table :data="filterTableData4" style="width: 100%" model="formt">
          <el-table-column
      prop="create_date"
      label="投稿日期"
      sortable
      width="180"
      column-key="date"
    />
    <el-table-column label="作者" prop="uname" />
    <el-table-column label="专栏名称" prop="workname" />   
    <el-table-column align="right">
      <template #header>
       <div class="search-bar">
    <el-input v-model="formt.workname" size="small" placeholder="作品名称搜索" class="flex-item" />
    <el-button type="primary" @click="btnQueryt" class="flex-item"><i class="iconfont icon-chaxun"></i></el-button>
  </div>
      </template>
      <template #default="scope">
      <el-button size="big" type="primary" @click="text (scope.row.workid)">审核</el-button
  >
</template>
    </el-table-column>
  </el-table>
  <!-- 分页功能 -->
  <div class="table-page">
    <el-pagination
      @size-change="handleSizeChanget"
      @current-change="handleCurrentChanget"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="sizes, prev, pager, next, jumper"
      :total="pageInfot.total"
    />
  </div>
    </el-tab-pane>
    <el-drawer
    v-model="textVisible"
    title="审核详情"
    direction="rtl"
    size="50%"
  >
  <el-descriptions :column="1" border>
    <el-descriptions-item label="专栏名称">{{ gridDatat.workname }}</el-descriptions-item>
    <el-descriptions-item label="封面"><img alt="暂无图片" width="520" height="400" :src= "gridDatat.cover"></el-descriptions-item>
    <el-descriptions-item label="内容"><div v-html="gridDatat.work"></div></el-descriptions-item>
  </el-descriptions>
    <p/>
    <div  style="display: flex; justify-content: center;">
      <el-form :model="gridDatat">
        <el-form-item label="反馈 ：">
  <el-input
    v-model="gridDatat.feedback"
    :autosize="{ minRows: 2, maxRows: 4 }"
    type="textarea"
    placeholder="Please input"
  />
</el-form-item>
<div style="margin: 30px 200px">

    <el-radio-group v-model="gridDatat.state">
      <el-radio  label="审核通过" size="large" border style="background-color:honeydew;">通过</el-radio>
      <el-radio  label="审核不通过" size="large" border style="background-color:silver;">不通过</el-radio>
      <el-button type="primary" plain @click="updatet">提交</el-button>
    </el-radio-group>
    </div>
  </el-form>
  </div>

  </el-drawer>

  </el-tabs>
 </template>
<script>
import { ElDivider, ElMessage, ElDrawer } from 'element-plus'
import { useRouter } from 'vue-router'
import { h } from 'vue'
import { ref, computed } from 'vue';
import { watch } from 'vue';



 const search = ref('');
 
// 确保其他地方使用 search.value 而不是直接使用 search


export default {

  setup() {

      const size = ref(50)
      const spacer = h(ElDivider, { direction: 'vertical' })

      return {
        size,
        spacer,
        // 其他需要暴露给模板的属性
      }
    },
data(){
  return{
      activeName : ref('first'),

         filterTableData:[],//初始加载页面
         filterTableData2:[],
         filterTableData3:[],
         filterTableData4:[],
         tableVisible: false,
         scoreVisible: false,
         musicVisible: false,
         textVisible: false,
         gridDatav:{},
         gridDatas:{},
         gridDatam:{},
         gridDatat:{},
         passcount:{},
         nopasscount:{},
         checkcount:{},
         nocheckcount:{},
         pageInfov:{},
         pageInfos:{},
         pageInfom:{},
         pageInfot:{},
         pageSize:5,
         currentPage:1,
         formv:{
          workname:''
         },
         forms:{
          workname:''
         },
         formm:{
          workname:''
         },
         formt:{
          workname:''
         },
  }
},
mounted(){
  this.Loadvedio();//加载视频数据
  this.Loadscore();
  this.Loadmusic();
  this.Loadtext();
  this.statistics();
  this.getPageDatav(1,5)
  this.getPageDatas(1,5)
  this.getPageDatam(1,5)
  this.getPageDatat(1,5)
},
methods:{
  btnQueryv(){
    console.log(this.formv)
    this.Loadvedio()
  },
  btnQuerys(){
    console.log(this.forms)
    this.Loadscore()
  },
  btnQuerym(){
    console.log(this.formm)
    this.Loadmusic()
  },
  btnQueryt(){
    console.log(this.formt)
    this.Loadtext()
  },
  //统计
  statistics(){
    this.$http.get("http://localhost:8080/check/passcount").then((response)=>{
      console.log(response.data)
        this.passcount = response.data[0]
      }),
      this.$http.get("http://localhost:8080/check/nopasscount").then((response)=>{
        this.nopasscount = response.data[0]
        console.log(response.data)
      }),    
      this.$http.get("http://localhost:8080/check/checkcount").then((response)=>{
        this.checkcount = response.data[0]
        console.log(response.data)
      }),
      this.$http.get("http://localhost:8080/check/nocheckcount").then((response)=>{
        this.nocheckcount = response.data[0]
        console.log(response.data)
      })
  },

  //分页方法
  handleSizeChangev(pageSize){
    this.pageSize = pageSize
    this.getPageDatav(this.currentPage,this.pageSize)
    console.log("size:",pageSize);
  },
  handleCurrentChangev(pageNum){
    this.currentPage = pageNum
    this.getPageDatav(this.currentPage,this.pageSize)
    console.log("num:",pageNum);
  },
  handleSizeChanges(pageSize){
    this.pageSize = pageSize
    this.getPageDatas(this.currentPage,this.pageSize)
    console.log("size:",pageSize);
  },
  handleCurrentChanges(pageNum){
    this.currentPage = pageNum
    this.getPageDatas(this.currentPage,this.pageSize)
    console.log("num:",pageNum);
  },
  handleSizeChangem(pageSize){
    this.pageSize = pageSize
    this.getPageDatam(this.currentPage,this.pageSize)
    console.log("size:",pageSize);
  },
  handleCurrentChangem(pageNum){
    this.currentPage = pageNum
    this.getPageDatam(this.currentPage,this.pageSize)
    console.log("num:",pageNum);
  },
  handleSizeChanget(pageSize){
    this.pageSize = pageSize
    this.getPageDatat(this.currentPage,this.pageSize)
    console.log("size:",pageSize);
  },
  handleCurrentChanget(pageNum){
    this.currentPage = pageNum
    this.getPageDatat(this.currentPage,this.pageSize)
    console.log("num:",pageNum);
  },
//获得分页数据
  getPageDatav(num,size){
    this.$http.get("http://localhost:8080/check/pages",{params:{pageNum:num,pageSize:size}}).then((response)=>{
      this.pageInfov = response.data
      this.filterTableData = this.pageInfov.list
    })
  },
  getPageDatas(num,size){
    this.$http.get("http://localhost:8080/check/pages2",{params:{pageNum:num,pageSize:size}}).then((response)=>{
      this.pageInfos = response.data
      this.filterTableData2 = this.pageInfos.list
    })
  },
  getPageDatam(num,size){
    this.$http.get("http://localhost:8080/check/pages3",{params:{pageNum:num,pageSize:size}}).then((response)=>{
      this.pageInfom = response.data
      this.filterTableData3 = this.pageInfom.list
    })
  },
  getPageDatat(num,size){
    this.$http.get("http://localhost:8080/check/pages4",{params:{pageNum:num,pageSize:size}}).then((response)=>{
      this.pageInfot = response.data
      this.filterTableData4 = this.pageInfot.list
    })
  },
  center(){
      this.$router.push('admincenter')
    },
    logout() {
      this.$router.push('/');
    },
    backout() {
      this.$router.push('/welcome');
    },

    table(workid) {   //详情
      this.tableVisible = true          
        console.log(workid);
        this.$http.get("http://localhost:8080/check/get/"+workid).then((res)=>{
            console.log(res.data)
            this.gridDatav = res.data

      }).catch((err)=>{
            console.log(err);
      })
  },
  score(workid) {
        console.log();
        this.$http.get("http://localhost:8080/check/get/"+workid).then((res)=>{
            console.log(res.data)
            this.gridDatas = res.data

      }).catch((err)=>{
            console.log(err);
      })
      this.scoreVisible = true
  },
  music(workid) {
        console.log();
        this.$http.get("http://localhost:8080/check/get/"+workid).then((res)=>{
            console.log(res.data)
            this.gridDatam = res.data     
      }).catch((err)=>{
            console.log(err);
      })
      this.musicVisible = true
  },
  text(workid) {
        console.log();
        this.$http.get("http://localhost:8080/check/get/"+workid).then((res)=>{
            console.log(res.data)
            this.gridDatat = res.data
            
      }).catch((err)=>{
            console.log(err);
      })
      this.textVisible = true
  },

    updatev(){//视频审核
      this.$http.post("http://localhost:8080/check/pass",this.gridDatav).then((res)=>{
              if(res.data==1){
                console.log("审核完成");
                this.gridDatav={},    //清空表单
                this.tableVisible=false //关闭
                this.Loadvedio()  //重新加载
                ElMessage({
                message: '审核完成',
                type: 'success',
                })
              }else{
                console.log("审核未完成，请重试");
                this.gridDatav={},
                this.tableVisible=false //关闭
                this.Loadvedio()
                ElMessage({
                message: '审核未完成，请重试',
                type: 'warning',
            }).catch((err)=>{
              // console.log(err);
            })
              }
        })
      this.tableVisible=false
    },
    updates(){//乐谱审核
      this.$http.post("http://localhost:8080/check/pass",this.gridDatas).then((res)=>{
              if(res.data==1){
                console.log("审核完成");
                this.gridDatas={},    //清空表单
                this.scoreVisible=false //关闭
                this.Loadscore()  //重新加载
                ElMessage({
                message: '审核完成',
                type: 'success',
                })
              }else{
                console.log("审核未完成，请重试");
                this.gridDatas={},
                this.scoreVisible=false //关闭
                this.Loadscore() 
                ElMessage({
                message: '审核未完成，请重试',
                type: 'warning',
            }).catch((err)=>{
              // console.log(err);
            })
              }
        })
      this.scoreVisible=false
    },
    updatem(){//乐曲审核
      this.$http.post("http://localhost:8080/check/pass",this.gridDatam).then((res)=>{
              if(res.data==1){
                console.log("审核完成");
                this.gridDatam={},    //清空表单
                this.musicVisible=false //关闭
                this.Loadmusic()  //重新加载
                ElMessage({
                message: '审核完成',
                type: 'success',
                })
              }else{
                console.log("审核未完成，请重试");
                this.gridDatam={},
                this.musicVisible=false //关闭
                this.Loadmusic()
                ElMessage({
                message: '审核未完成，请重试',
                type: 'warning',
            }).catch((err)=>{
              // console.log(err);
            })
              }
        })
      this.musicVisible=false
    },
    updatet(){//专栏审核
      this.$http.post("http://localhost:8080/check/pass",this.gridDatat).then((res)=>{
              if(res.data==1){
                console.log("审核完成");
                this.gridDatat={},    //清空表单
                this.textVisible=false //关闭
                this.Loadtext()  //重新加载
                ElMessage({
                message: '审核完成',
                type: 'success',
                })
              }else{
                console.log("审核未完成，请重试");
                this.textDatav={},
                this.textVisible=false //关闭
                this.Loadtext()
                ElMessage({
                message: '审核未完成，请重试',
                type: 'warning',
            }).catch((err)=>{
              // console.log(err);
            })
              }
        })
      this.textVisible=false
    },
  //显示数据
  Loadvedio(){
    this.$http.get("http://localhost:8080/check/video?workname="+this.formv.workname, {
    }).then((res)=>{
      this.filterTableData = res.data;
      this.pageInfov.total = res.data.length
      console.log(res.data);
    }).catch((err)=>{
      console.log(err);
    });
  },
  Loadscore(){
    this.$http.get("http://localhost:8080/check/score?workname="+this.forms.workname, {
    }).then((res)=>{
      this.filterTableData2 = res.data;
      this.pageInfos.total = res.data.length
      console.log(res.data);
    }).catch((err)=>{
      console.log(err);
    });
  },
  Loadmusic(){
    this.$http.get("http://localhost:8080/check/music?workname="+this.formm.workname, {
    }).then((res)=>{
      this.filterTableData3 = res.data;
      this.pageInfom.total= res.data.length
      console.log(res.data);
    }).catch((err)=>{
      console.log(err);
    });
  },
  Loadtext(){
    this.$http.get("http://localhost:8080/check/text?workname="+this.formt.workname, {
    }).then((res)=>{
      this.filterTableData4 = res.data;
      this.pageInfot.total = res.data.length
      console.log(res.data);
    }).catch((err)=>{
      console.log(err);
    });
  }
},


}
</script>


 <style>
 .demo-tabs > .el-tabs__content {
   padding: 32px;
   color: #6b778c;
   font-size: 32px;
   font-weight: 600;
 }
 .custom-button {
  border: none; /* 去掉边框 */
  padding: 0;   /* 去掉内边距 */
  margin-left:12px; /* 左移10像素，根据需要调整 */
  background-color: transparent; /* 使背景透明，以便不显示默认按钮背景颜色 */
  cursor: pointer; /* 显示指针样式，表明是可点击的 */
}
.table-page{
  float:right;
  margin:12px
}
.search-bar {
  display: flex;
  align-items: center;
}

.flex-item {
  margin-right: 10px; /* 可根据需要调整间距 */
}
 </style>